// components/nav-bar/nav-bar.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 相当于鸿蒙的 @Prop 装饰器
    // @Prop back: boolean = false
    back: {
      type: Boolean, // 小程序这里类型是大写开头
      value: false,
    },
    // back: Boolean,  // 如果没有默认值，可简写
  },

  // 小程序组件样式：默认是样式隔离的
  // 组件接受的外部样式类，样式由外部传进来给组件使用
  //  wxml:
  //    <nav-bar custom-class="xxxx"></nav-bar>
  //  wxss:
  //     .xxxx { 样式 }
  externalClasses: ["custom-class"],

  /**
   * 组件的初始数据
   */
  data: {
    safeAreaTop: 0,
  },

  /**
   * 组件的声明周期对象
   */
  lifetimes: {
    // 在组件实例刚刚被创建时执行，注意此时不能调用 setData
    created() {},
    // 在组件实例进入页面节点树时执行，相当于 Vue 的 onMounted，鸿蒙的 onDidBuild
    attached() {
      // 获取窗口信息
      const windowInfo = wx.getWindowInfo();
      this.setData({
        // 安全区域左上角纵坐标，用于避开顶部状态栏和摄像头，单位为 px
        safeAreaTop: windowInfo.safeArea.top,
      });
    },
    // 在组件实例被从页面节点树移除时执行（销毁）
    detached() {},
  },

  /**
   * 组件所在页面的生命周期声明对象
   */
  pageLifetimes: {
    hide() {
      console.log("页面隐藏（切后台）");
    },
    show() {
      console.log("页面显示（切前台）");
    },
  },

  /**
   * 组件的方法列表
   */
  methods: {
    comLeftClick() {
      // 触发自定义事件，调用父组件传过来的回调函数
      // this.triggerEvent('自定义事件名称', 子传父的参数)
      this.triggerEvent("left-click", { aa: 11 });
    },
  },

  // 开启插槽
  options: {
    // 组件定义时的选项中启用多slot支持（建议开启）
    multipleSlots: true,
    // 关闭组件样式隔离，要求组件类名更规范，可添加前缀标识，避免类名冲突（建议开启）
    addGlobalClass: true,
  },
});
